<template>
  <div class="follow-message">
    <div class="g-content">
      <ul class="menu">
        <li :class="['content', menuActive == index ? 'active-content' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(index)">
          {{ item }}
        </li>
      </ul>
      <div class="g-form">
        <Collect v-show="menuActive == 0" />
        <Follow v-show="menuActive == 1"/>
        <Message v-show="menuActive == 2" />
      </div>
    </div>
  </div>
</template>

<script>
import Collect from './components/collect'
import Follow from './components/follow'
import Message from './components/message'
export default {
  scrollToTop: true,
  // 在路由匹配组件渲染之前会先执行中间件处理
  middleware: 'checkToken',
  name: 'follow-message',
  components: {
    Collect,
    Follow,
    Message
  },
  data() {
    return {
      menuList: [
        '收藏',
        '关注',
        '信息'
      ], // 左侧菜单
      menuActive: 0
    }
  },
  watch: {
    // 因为收藏监听消息在同一个界面，所以要监听一下传过来的menuActive是什么
    '$route.query.menuActive'(val) {
      this.menuActive = val
    }
  },
  mounted() {
    
  },
  methods: {
    // 点击左侧菜单
    handleMenu(index) {
      this.menuActive = index
    }
  }
}
</script>

<style lang="less" scoped>
  .follow-message {
    padding-bottom: 120px;

    .g-content {
      padding: 120px 276px 0;
      display: flex;

      .menu {
        height: 100%;
        margin-right: 90px;

        .content {
          width: 110px;
          line-height: 24px;
          margin-bottom: 37px;
          font-size: 24px;
          color: #999;
          cursor: pointer;
          list-style-type: none;

          &.active-content {
            color: #000;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .g-form {
        width: 1152px;
        background: #fff;
      }
    }
  }
</style>
